<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>质保书签发</title>
    <link rel="stylesheet" href="http://static-online.zhaogangtest.com/publicresource/css/bootstrap-table.css">
    <link rel="stylesheet" href="http://static-online.zhaogangtest.com/publicresource/control/daterangpicker/daterangepicker-bs3.css">

    <link rel="stylesheet" href="../../../resources/public/css/iconfont.min.css">
    <link rel="stylesheet" href="../../../resources/public/css/table.css">
    <link rel="stylesheet" href="../../../resources/public/css/scmstrap.css">
    <link rel="stylesheet" href="../../../resources/public/css/slick.css">
    <link rel="stylesheet" href="../../../resources/public/css/scmstrap-other.css">
</head>

<body>

    <div class="main">
        <!-- 条件区域 -->
        <div class="form-list">
            <div class="group">
                <label>合同号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input" placeholder="">
                </div>
            </div>
            <div class="group group-select">
                <label>品名</label>
                <div class='selectshow selectshowAction scm-input-wrap'>
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>活跃</li>
                    <li>睡眠</li>
                </ul>
            </div>
            <div class="group group-data">
                <label>开始时间</label>
                <div class="scm-input-wrap">
                    <i class="anticon icon-calendar"></i>
                    <input type="text" class="scm-input" id="datepicker">
                </div>
            </div>
            <div class="group group-data">
                <label>结束时间</label>
                <div class="scm-input-wrap">
                    <i class="anticon icon-calendar"></i>
                    <input type="text" class="scm-input" id="datepicker1">
                </div>
            </div>

            <div class="group">
                <label>客户名称</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input" placeholder="">
                </div>
            </div>
            <div class="group group-select">
                <label>签发人</label>
                <div class='selectshow selectshowAction scm-input-wrap'>
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>活跃</li>
                    <li>睡眠</li>
                </ul>
            </div>
            <div class="group">
                <label>实提单号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input" placeholder="">
                </div>
            </div>
            <div class="group group-select">
                <label>打印状态</label>
                <div class='selectshow selectshowAction scm-input-wrap'>
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>活跃</li>
                    <li>睡眠</li>
                </ul>
            </div>
            <div class="group">
                <label>组批号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input" placeholder="">
                </div>
            </div>
            <div class="group">
                <label>质保书编号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input" placeholder="">
                </div>
            </div>

        </div>
        <!-- 按钮 -->
        <div class="operation">
            <div class="conditionbtn">
                <button class="scm-btn blue">
                    <i class="anticon icon-save"></i>保存</button>
                <button class="scm-btn resetBtn">
                    <i class="anticon icon-delete"></i>重置</button>
            </div>
            <!-- 按钮组 -->
            <div class="scm-btn-group fr">
                <button class="scm-btn btn-view">
                    <i class="anticon icon-eyeo"></i>查看</button>

                <button class="scm-btn">
                    <i class="anticon icon-delete"></i>废弃</button>
            </div>
        </div>
        <div class="box-table box-tableTr">
            <table class="table table-condensed" id="table-manage"></table>
        </div>
    </div>

    <!-- 查看 -->
    <div class="layer-slick" style="display:none">
        <div class="slick">
            <div>
                <img src="../../../resources/public/images/photo1.jpg" alt="">
            </div>
        </div>
     
    </div>

    <!-- 选择实提单 -->
    <div class="layer-view" style="display: none">
        <form class="hascheck" role="form">
            <div class="form-list  form-list-line3">
                <div class="group form-group">
                    <label>合同号</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>品名</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>实体单号</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>客户名称</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>签发人</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>签发时间</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>打印状态</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group">
                    <label>打印次数</label>
                    <div class="input-parent">
                        <input type="text" class="scm-input scm-input-read" readonly="" value="20180202000002">
                    </div>
                </div>
                <div class="group form-group group-all height-auto">
                    <label>备注</label>
                    <div class="input-parent  height-auto">
                        <textarea name="" class="textarea-read" readonly>121212
1122
                        </textarea>
                    </div>
                </div>
            </div>
        </form>
        <div class="box-table box-tableTr">
            <table class="table table-condensed" id="table-manageView"></table>
        </div>
    </div>

    <script src="http://static-online.zhaogangtest.com/publicresource/js/require.js"></script>
    <script>
        require.config({
            paths: {
                "jquery": "../../../resources/public/js/jquery.min",
                "bootstrap": 'http://static-online.zhaogangtest.com/publicresource/js/bootstrap.min',
                "bootstrap-table": "../../../resources/public/js/bootstrap-table",
                "layer": "http://static-online.zhaogangtest.com/publicresource/control/layer/layer.min",
                "moment": "http://static-online.zhaogangtest.com/publicresource/control/daterangpicker/moment.min",
                "daterangepicker": '../../../resources/public/js/daterangepicker',

                "slick": "../../../resources/public/js/slick",
                "public": "../../../resources/public/js/public",
                "chinese": "../../../resources/public/js/chinese",
            },
            shim: {
                "jquery": {
                    exports: ['jQuery', '$']
                },
                "bootstrap": {
                    deps: ["jquery"]
                },
                "bootstrap-table": {
                    deps: ["jquery", "bootstrap"]
                },

                "slick": {
                    deps: ["jquery"]
                },

                "layer": {
                    deps: ["jquery"],
                    exports: "layer"
                },
                "moment": {
                    deps: ["jquery"],
                },
                "daterangepicker": {
                    deps: ["jquery", "moment"],
                    exports: "daterangepicker"
                },


                "public": {
                    deps: ["jquery", "bootstrap-table", "moment", "daterangepicker"]
                },

                "chinese": {
                    deps: ["jquery", "bootstrap-table"],
                },

            }
        });
        require(["public", "layer", "chinese", "slick"], function () {
            layer.config({
                path: 'http://static-online.zhaogangtest.com/publicresource/control/layer/'
            });
            $(function () {
                var page = {
                    $table: $('#table-manage'),
                    $tableManageView: $('#table-manageView'),
                    $slick: $('.slick'),
                    init: function () {
                        this.bootstrapTable();
                        this.fn_layer();
                        this.fn_getTrData();
                        $(window).resize(function () {
                            page.$table.bootstrapTable('resetView', {
                                height: page.getHeight()
                            });
                        });
                        $.daterangepicker("#datepicker,#datepicker1");


                    },

                    fn_layer: function () {

                        // 查看
                        $(document).on("click", ".btn-view", function () {
                            layer.open({
                                type: 1, //page层
                                area: ['800px', '550px'],
                                title: '质保书查看',
                                shadeClose: false,
                                btn: ['打印预览', '废弃'],
                                shade: 0.01, //遮罩透明度
                                moveType: 1, //拖拽风格，0是默认，1是传统拖动
                                shift: -1, //0-6的动画形式，-1不开启
                                content: $('.layer-view'),
                                skin: "skin-searchMore",
                                yes: function (index) {
                                    layer.close(index)
                                    layer.open({
                                        type: 1, //page层
                                        area: ['700px', '470px'],
                                        title: '预览',
                                        shadeClose: false,
                                        btn: ['打印全部', '打印当前', '下载'],
                                        shade: 0.01, //遮罩透明度
                                        moveType: 1, //拖拽风格，0是默认，1是传统拖动
                                        shift: -1, //0-6的动画形式，-1不开启
                                        content: $('.layer-slick'),
                                        skin: "skin-searchMore skin-overflow",
                                    })
                                }
                            })
                            page.$tableManageView.bootstrapTable({
                                pagination: false, //在表格底部显示分页工具栏
                                pageSize: 50,
                                pageNumber: 1,
                                pageList: [10, 25, 50, 100],
                                height: 180,
                                showFooter: false,
                                showColumns: false,
                                showRefresh: false,
                                //                    showToggle:true,
                                search: false,
                                //                    showPaginationSwitch:true,
                                // detailView: true,
                                // detailFormatter: this.showChild,
                                // onExpandRow: this.expandRow,
                                // onCollapseRow: this.collapseRow,
                                locales: 'zh-CN',

                                uniqueId: "id",
                                fixedColumns: true,
                                url: '../data/warrantybook/tablelist-manageView.json',
                                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

                                columns: [{
                                    "field": "n0",
                                    "title": "组批号",
                                }, {
                                    "field": "n1",
                                    "title": "生产日期",
                                }, {
                                    "field": "n2",
                                    "title": "牌号",
                                }, {
                                    "field": "n3",
                                    "title": "规格",
                                }, {
                                    "field": "n4",
                                    "title": "品名",
                                }, {
                                    "field": "n5",
                                    "title": "数量",
                                }, {
                                    "field": "n6",
                                    "title": "重量",
                                }, {
                                    "field": "n7",
                                    "title": "C",
                                }, {
                                    "field": "n8",
                                    "title": "Si",
                                }, {
                                    "field": "n9",
                                    "title": "Mn",
                                }, {
                                    "field": "n10",
                                    "title": "S",
                                }, {
                                    "field": "n11",
                                    "title": "Al",
                                }, {
                                    "field": "n12",
                                    "title": "ReH",
                                }, {
                                    "field": "n13",
                                    "title": "Rm",
                                }, {
                                    "field": "n14",
                                    "title": "温度",
                                }]
                            });


                        });
                    },
                    bootstrapTable: function () {
                        page.$table.bootstrapTable({
                            pagination: true, //在表格底部显示分页工具栏
                            pageSize: 50,
                            pageNumber: 1,
                            pageList: [10, 25, 50, 100],
                            height: this.getHeight(),
                            showFooter: false,
                            showColumns: false,
                            showRefresh: false,
                            //                    showToggle:true,
                            search: false,
                            //                    showPaginationSwitch:true,
                            // detailView: true,
                            // detailFormatter: this.showChild,
                            // onExpandRow: this.expandRow,
                            // onCollapseRow: this.collapseRow,
                            locales: 'zh-CN',

                            uniqueId: "id",
                            fixedColumns: true,
                            url: '../data/warrantybook/tablelist-manage.json',
                            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                            columns: [{
                                "field": "n0",
                                "title": "质保书编号",
                            }, {
                                "field": "n1",
                                "title": "签发日期",
                            }, {
                                "field": "n2",
                                "title": "合同号",
                            }, {
                                "field": "n3",
                                "title": "实体单号",
                            }, {
                                "field": "n4",
                                "title": "品名",
                            }, {
                                "field": "n5",
                                "title": "打印状态",
                            }, {
                                "field": "n6",
                                "title": "打印次数",
                            }, {
                                "field": "n7",
                                "title": "总数量",
                            }, {
                                "field": "n8",
                                "title": "总重量",
                            }, {
                                "field": "n9",
                                "title": "签发人",
                            }, {
                                "field": "n10",
                                "title": "备注",
                                width: 150,
                                formatter: public.fn_formatterNote
                            }]
                        });
                    },
                    // 表格高度
                    getHeight: function () {
                        var height = public.fn_tableHeight()
                        return $(window).height() - height;
                    },
                    //获取选中行数据
                    fn_getTrData: function () {
                        $(document).on('click', '.box-tableTr .table tbody>tr', function () {
                            var id = $(this).closest('tr').attr('data-uniqueid');
                            if ($(this).hasClass('active')) {
                                var data = page.$table.bootstrapTable(
                                    'getRowByUniqueId', id); //获取选中行的数据
                                console.log(data);

                            }

                        })

                    },

              
                }
                page.init();
            })

        })
    </script>
</body>

</html>